<template>
 <div> <van-row type="flex" justify="space-between">
  <van-col span="3"><img class="img1" src="" alt=""></van-col>
  <van-col span="17">
           <div class="box">
           <span class="jdimg"></span>
           <span class="searchimg"></span>
           <input type="text" value="温奶器" class="iconfont" @click="fun">     
        </div>
           </van-col>
  <van-col class="txt" span="4" @click="funlogin">登录</van-col>
</van-row>
</div>
</template>

<script>
export default {
    methods: {
        fun(){
             this.$router.push("/searchpage");
        },
        funlogin(){
            this.$router.push("/signpage");
        }
    }, 
}
</script>

<style scoped>
.van-row{
    width: 100vw;
    background: #c82519;
    height: 11.7333vw;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 999;
}
.van-col{
  text-align: center;
}
.img1{
    width: 5.3333vw;
    height: 4.8vw;
    vertical-align: middle;
}
.box{
    width: 72.8vw;
    height: 8vw;
    border-radius: 8vw;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 3.2vw;
    color: #999;
    position: relative;
}
.txt{
    font-size: 3.7333vw;
    color: #fff;
}
span.jdimg{
    width: 5.3333vw;
    height: 4vw;
    background: url()no-repeat 0 0/100%;
    margin-left: 2.6667vw;
}
span.searchimg{
    width: 4.8vw;
    height: 4vw;
    background: url(../../assets/jd-sprites.png)no-repeat -21.3333vw 0/53.3333vw;
    margin-left: 2.6667vw;
    position: absolute;
    left: 9.3333vw;
}
input{
    width: 60.3333vw;
    height: 4.2667vw;
    padding-left: 8vw;
    box-sizing: border-box;
    border: none;
    border-left: 1px solid #eee;
    outline: none;
}

</style>